<template>
    <div>
        <XPTable ref='tableRef' :api='pageApi' :columns='columns'></XPTable>
    </div>
</template>

<script lang='ts' setup>
    import { reactive, ref } from 'vue'
    import { meterFolderPageApi, deleteMeterFolderApi } from '@/api/meterFolderManagement'
    import { Column } from '@/types'

    
    const tableRef = ref()

    const columns = reactive<Column[]>([
        {title : '区域编码', dataIndex : 'code', align : 'center'},
        {title : '区域名称', dataIndex : 'name', align : 'center'},
        {title : '表册号', dataIndex : 'biaoceCode', align : 'center'},
        {title : '表册名称', dataIndex : 'biaoceName', align : 'center', inFilter : true},
        {title : '表册类型', dataIndex : 'biaoceType', align : 'center'},
        {title : '抄表员', dataIndex : 'chaobiaoUser', align : 'center', inFilter : true, filter : {type : 'select', options : [], labelField : 'name', valueField : 'code'}},
        {title : '备注', dataIndex : 'remark', align : 'center'}
    ])

    async function pageApi(params:any) {
        return meterFolderPageApi(params)
    }
</script>
